<template>
  <el-dialog
    class="met-dialog"
    :title="title"
    width="1100px"
    :visible.sync="visible"
    :modal-append-to-body="false"
    :append-to-body="true"
  >
    <div class="addcustomer">
      <div class="type2" v-if="formline.categoryId == 'unit'">
        <div class="type2-title">客户基本信息</div>
        <div class="row">
          <div class="col w5">
            <div class="label"><span class="red-icon">* </span>客户编号：</div>
            <div class="value w5">{{ formline.customerNo }}</div>
          </div>
          <div class="col w5">
            <div class="label"><span class="red-icon">*</span>客户类型</div>
            <div class="value">
              <!-- {{ formline.subCategoryId }} -->
              <dict-tag
                :options="dict.type[formline.categoryId]"
                :value="formline.subCategoryId"
              />
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="label"><span class="red-icon">*</span>客户全称：</div>
            <div class="value">
              {{ formline.customerName }}
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col w3">
            <div class="label"><span class="red-icon">* </span>服务团队：</div>
            <div class="value">
              {{ formline.serviceGroupName }}
            </div>
          </div>
          <div class="col w3">
            <div class="label">
              <span class="red-icon">* </span>客户负责律师
            </div>
            <div class="value">
              {{ formline.lawyerName }}
            </div>
          </div>
          <div class="col w3">
            <div class="label"><span class="red-icon">*</span>客户状态</div>
            <div class="value">
              <dict-tag
                :options="dict.type.customer_state"
                :value="formline.state"
              />
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="label">关联单位：</div>
            <div class="colfelx">
              <el-table
                :data="formline.associatedUnits"
                style="width: 100%"
                border
                class="primary-table"
              >
                <el-table-column prop="date" label="日期" align="center">
                </el-table-column>
                <el-table-column prop="name" label="姓名" align="center">
                </el-table-column>
                <el-table-column prop="address" label="地址" align="center">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="label"><span class="red-icon">*</span>简介：</div>
          <div class="value">
            {{ formline.introduction }}
          </div>
        </div>
        <div class="type2-title">单位信息</div>
        <div class="row">
          <!-- <div class="col w3">
            <div class="label">统一社会信用代码：</div>
            <div class="value">
              {{ formline.idType }}
            </div>
          </div> -->
          <div class="col w3">
            <div class="label">法人代表/负责人：</div>
            <div class="value">
              {{ formline.legalPerson }}
            </div>
          </div>
          <div class="col w3">
            <div class="label">单位传真：</div>
            <div class="value">
              {{ formline.fax }}
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col w3">
            <div class="label">单位电话：</div>
            <div class="value">
              {{ formline.tel }}
            </div>
          </div>
          <div class="col w3">
            <div class="label">单位地址：</div>
            <div class="value">
              {{ formline.address }}
            </div>
          </div>
          <div class="col w3">
            <div class="label">邮编：</div>
            <div class="value">
              {{ formline.postCode }}
            </div>
          </div>
        </div>
        <div class="row-right">
          <div class="col w3">
            <div class="label">开户行：</div>
            <div class="value">
              {{ formline.bankName }}
            </div>
          </div>
          <div class="col w3">
            <div class="label">银行账号：</div>
            <div class="value">
              {{ formline.bankAccount }}
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col w3">
            <div class="label">所属地区：</div>
            <div class="value">
              {{ formline.region }}
            </div>
          </div>
          <div class="col w3">
            <div class="label">人员规模：</div>
            <div class="value">
              {{ formline.scale }}
            </div>
          </div>
          <div class="col w3">
            <div class="label">单位网址：</div>
            <div class="value">{{ formline.text }}</div>
          </div>
        </div>
        <div class="row">
          <div class="col w3">
            <div class="label">所属行业：</div>
            <div class="value">{{ formline.industry }}</div>
          </div>
          <div class="col w3">
            <div class="label">注册资本(万元)：</div>
            <div class="value">
              {{ formline.registeredCapital }}
            </div>
          </div>
          <div class="col w3">
            <div class="label">年营业额(万元)：</div>
            <div class="value">
              {{ formline.annualTurnover }}
            </div>
          </div>
        </div>
        <div class="type2-title">联系人</div>
        <div class="colfelx">
          <el-table
            :data="formline.linkmen"
            style="width: 100%"
            border
            class="primary-table"
          >
            <el-table-column
              prop="name"
              label="姓名"
              align="center"
              width="120"
            >
            </el-table-column>
            <el-table-column
              prop="deptName"
              label="部门"
              align="center"
              width="120"
            >
            </el-table-column>
            <el-table-column
              prop="jobTitle"
              label="职务"
              align="center"
              width="120"
            >
            </el-table-column>
            <el-table-column
              prop="mobile"
              label="手机"
              align="center"
              width="120"
            >
            </el-table-column>
            <el-table-column prop="tel" label="固话" align="center" width="120">
            </el-table-column>
            <el-table-column
              prop="email"
              label="Email"
              align="center"
              width="120"
            >
            </el-table-column>
            <el-table-column prop="qq" label="QQ" align="center" width="120">
            </el-table-column>
            <el-table-column
              prop="ageRange"
              label="年龄范围"
              align="center"
              width="120"
            >
            </el-table-column>
            <el-table-column
              prop="socialRelationships"
              label="社会关系"
              align="center"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="type2" v-else>
        <div class="type2-title">客户基本信息</div>
        <div class="row">
          <div class="col w5">
            <div class="label"><span class="red-icon">* </span>客户编号：</div>
            <div class="value">{{ formline.customerNo }}</div>
          </div>
          <div class="col w5">
            <div class="label"><span class="red-icon">*</span>客户类型</div>
            <div class="value">
              <dict-tag
                :options="dict.type[formline.categoryId]"
                :value="formline.subCategoryId"
              />
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="label"><span class="red-icon">*</span>客户全称：</div>
            <div class="value">
              {{ formline.customerName }}
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col w3">
            <div class="label"><span class="red-icon">* </span>服务团队：</div>
            <div class="value">
              {{ formline.serviceGroupName }}
            </div>
          </div>
          <div class="col w3">
            <div class="label">
              <span class="red-icon">* </span>客户负责律师
            </div>
            <div class="value">
              <!-- <el-input v-model="formline.lawyerName"></el-input> -->
              {{ formline.lawyerName }}
            </div>
          </div>
          <div class="col w3">
            <div class="label"><span class="red-icon">*</span>客户状态</div>
            <div class="value">{{ formline.state }}</div>
          </div>
        </div>
        <div class="type2-title">联系信息</div>
        <div class="row">
          <div class="col w3">
            <div class="label">手机：</div>
            <div class="value">
              {{ formline.mobile }}
            </div>
          </div>
          <div class="col w3">
            <div class="label">固话：</div>
            <div class="value">
              {{ formline.telphone }}
            </div>
          </div>
          <div class="col w3">
            <div class="label">Email:</div>
            <div class="value">
              {{ formline.email }}
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col w3">
            <div class="label">微信号：</div>
            <div class="value">
              {{ formline.wechat }}
            </div>
          </div>
          <div class="col w3">
            <div class="label">QQ：</div>
            <div class="value">
              {{ formline.qq }}
            </div>
          </div>
          <div class="col w3">
            <div class="label">邮编:</div>
            <div class="value">
              {{ formline.postCode }}
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="label">通信地址:</div>
            <div class="value">
              {{ formline.title }}
            </div>
          </div>
        </div>
        <div class="type2-title">详细信息</div>
        <div class="row">
          <div class="col w3">
            <div class="label">性别</div>
            <div class="value">
              <dict-tag
                :options="dict.type.sys_user_sex"
                :value="formline.gender"
              />
            </div>
          </div>
          <div class="col w3">
            <div class="label">出生日期：</div>
            <div class="value">
              {{ formline.birthday }}
            </div>
          </div>
          <div class="col w3">
            <div class="label">婚姻状况:</div>
            <div class="value">
              <dict-tag
                :options="dict.type.marital_status"
                :value="formline.maritalStatus"
              />
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col felx0">
            <div class="label">证件类型：</div>
            <div class="value">
              <dict-tag :options="dict.type.id_type" :value="formline.idType" />
            </div>
          </div>
          <div class="col felx0">
            <div class="label">证件号码：</div>
            <div class="value">
              {{ formline.idNo }}
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col w3">
            <div class="label">国籍:</div>
            <div class="value">
              <dict-tag
                :options="dict.type.basic_country"
                :value="formline.nationality"
              />
            </div>
          </div>
          <div class="col w3">
            <div class="label">民族：</div>
            <div class="value">
              {{ formline.ethnicity }}
            </div>
          </div>
          <div class="col w3">
            <div class="label">籍贯:</div>
            <div class="value">
              {{ formline.originPlace }}
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col w5">
            <div class="label">开户行:</div>
            <div class="value">
              {{ formline.bankName }}
            </div>
          </div>
          <div class="col w5">
            <div class="label">银行账号:</div>
            <div class="value">
              {{ formline.bankAccount }}
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col w5">
            <div class="label">工作单位:</div>
            <div class="value">
              {{ formline.company }}
            </div>
          </div>
          <div class="col w5">
            <div class="label">工作单位地址：</div>
            <div class="value">
              {{ formline.companyAddress }}
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="label">社会关系:</div>
            <div class="value">
              {{ formline.socialRelations }}
            </div>
          </div>
        </div>
        <div class="type2-title">其他联系人</div>

        <div class="row">
          <div class="col">
            <div class="colfelx">
              <el-table
                :data="formline.linkmen"
                style="width: 100%"
                border
                class="primary-table"
              >
                <el-table-column
                  prop="name"
                  label="姓名"
                  align="center"
                  width="170"
                >
                </el-table-column>
                <el-table-column
                  prop="mobile"
                  label="手机"
                  align="center"
                  width="170"
                >
                </el-table-column>
                <el-table-column
                  prop="tel"
                  label="固话"
                  align="center"
                  width="170"
                >
                </el-table-column>
                <el-table-column
                  prop="email"
                  label="Email"
                  width="170"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="qq"
                  width="170"
                  label="QQ"
                  align="center"
                >
                </el-table-column>
                <el-table-column prop="remark" label="备注" align="center">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <div class="type2">
        <div class="type2-title">其他信息</div>
        <div class="row">
          <div class="col">
            <div class="label">备注</div>
            <div class="value">
              {{ formline.node }}
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="label"><span class="red-icon">*</span>附件:</div>
            <div class="colfelx">
              <el-table
                :data="formline.attachments"
                style="width: 100%"
                border
                class="primary-table"
              >
                <el-table-column
                  prop="filename"
                  label="文件"
                  align="center"
                  width="180"
                >
                </el-table-column>
                <el-table-column
                  prop="size"
                  label="大小"
                  align="center"
                  width="180"
                >
                </el-table-column>
                <el-table-column
                  prop="createTime"
                  label="上传日期"
                  align="center"
                >
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <el-table :data="formline.reviewerList" stripe style="margin-top: 10px;width: 100%" v-if="editType == 1">
          <el-table-column prop="userName" label="审批人员" align="center">
          </el-table-column>
          <el-table-column prop="status" label="审核状态">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.audit_status"
                :value="scope.row.auditType"
              />
            </template>
          </el-table-column>
          <el-table-column prop="auditTime" label="审核时间"> </el-table-column>
        </el-table>
        <div class="row" style="margin-top: 20px" v-if="editType != 1">
          <div class="col">
            <div class="label"><span class="red-icon">*</span>审核意见:</div>
            <div class="colfelx" style="border: 0px" v-if="editType == 2">
              <el-input
                placeholder="请输入"
                style="width: 90%"
                v-model.trim="dataForm.remark"
              ></el-input>
            </div>
            <div class="colfelx" v-else>
              <span>{{ dataForm.remark }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="foot" slot="footer">
      <el-button @click="submit" type="primary" v-if="editType != 2"
        >确定</el-button
      >
      <template v-else>
        <el-button
          type="danger"
          :disabled="!dataForm.remark"
          v-loading="loading"
          @click="onSubmit(2)"
          key="danger"
          >拒绝</el-button
        >
        <el-button
          type="primary"
          key="primary"
          v-loading="loading"
          :disabled="!dataForm.remark"
          @click="onSubmit(1)"
          >通过</el-button
        >
      </template>
    </div>
  </el-dialog>
</template>

<script>
import { getToken } from "@/utils/auth";
import {
  addcustomer,
  checkcustomer,
  categorytree,
  getcustomer,
} from "@/api/case/case";
import { audit } from "@/api/approval/customer.js";
import moment from "moment";
export default {
  dicts: [
    "customer_region",
    "marital_status",
    "basic_country",
    "company_scale",
    "customer_state",
    "sys_user_sex",
    "id_type",
    "category_id",
    "unit",
    "person",
    "customer_industry",
    "audit_status"
  ],
  data() {
    return {
      visible: false,
      title: "客户详情",
      formline: {
        categoryId: 1,
        text: "",
        lawyerId: "", //客户律师id
        lawyerName: "", //客户律师名称
        attachments: [],
        linkmen: [],
        associatedUnits: [],
        serviceGroupId: "", //服务团队id
        serviceGroupName: "", //服务团队名称
        subCategoryId: "", //子分类
        categoryId: "", //客户分类
      },
      headers: { Authorization: "Bearer " + getToken() },
      uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      options2: [
        { value: 1, label: "企业法人" },
        { value: 2, label: "自然人客户类型" },
      ], //type2科技；类型
      step: 1, //当前步骤
      type: "",
      editType: "", // 审核或者查看类型步骤
      dataForm: {
        auditStatus: 1,
        id: 0,
        remark: "",
      },
      loading: false,
    };
  },
  watch: {},
  computed: {},
  created() {
    categorytree().then((res) => {
      console.log(res);
    });
  },
  methods: {
    //打开弹窗
    async open(row, type = 1) {
      // 1查看，2审核，3审核后的查看
      this.step = 2;
      this.title = "客户详情";
      this.formline.categoryId = "unit";
      this.dataForm.id = row.customerId;
      this.dataForm.remark = "";
      this.editType = type;
      getcustomer(row.customerId).then((res) => {
        // console.log(data);
        this.formline = res.data;

        this.formline.subCategoryId = String(this.formline.subCategoryId);
      });
      this.visible = true;
    },
    onSubmit(status) {
      this.loading = true;
      this.dataForm.auditStatus = status;
      audit(this.dataForm)
        .then((res) => {
          this.$message.success("保存成功");
          this.$parent.getList();
          this.loading = false;
          this.visible = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    //完成
    submit() {
      this.step = 1;
      this.$emit("submit", this.formline);
      this.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
$--color-titlebg: #f6f9fd; /* 表格标题背景颜色 */
$--color-border: #e9eef5; /* 边框颜色 */
$--color-labelbg: #f6f9fe; /* label北京颜色 */
.met-dialog {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.addcustomer {
  // height: 70vh;
  min-height: 500px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .border {
    border: 2px solid rgb(173, 169, 169);
    border-image-source: linear-gradient(55deg, #c5c7d1, #6f79cb);
    border-image-slice: 1;
    border-image-repeat: stretch;
    padding: 30px 20px;
    position: relative;
    border-radius: 3px;
    margin-bottom: 30px;
  }
  .title {
    font-size: 16px;
    font-weight: 600;
    position: absolute;
    top: -10px;
    background: white;
    padding: 0px 5px;
  }
}
.type1 {
  margin-top: 20px;
}
.foot {
  text-align: right;
  margin-top: 20px;
  margin-right: 50px;
}
.type2 {
  &-title {
    text-align: center;
    background: $--color-titlebg;
    font-weight: 600;
    font-size: 14px;
    padding: 10px;
  }
  .row {
    display: flex;
  }
  .row-right {
    display: flex;
    justify-content: left;
  }
  .col {
    flex: auto;
    display: flex;
  }
  .label {
    display: inline-block;
    width: 150px;
    text-align: right;
    padding: 5px 5px;
    border: 1px solid $--color-border;
    background: $--color-labelbg;
    display: flex;
    align-items: center;
    justify-content: right;
  }
  .felx0 {
    flex: 0 0 auto;
    .value {
      width: 215px;
    }
  }
  .red-icon {
    color: red;
    margin-right: 2px;
    position: relative;
    top: 3px;
  }
  .value {
    display: inline-block;
    border: 1px solid $--color-border;
    padding: 5px 5px;
    flex: 1;
    display: flex;
    align-items: center;
  }
  .w5 {
    width: 50%;
  }
  .w3 {
    width: 33%;
  }
  .colfelx {
    border: 1px solid $--color-border;
    flex: 1;
  }
  .left {
    text-align: left;
  }
  .upload-demo {
    display: inline-block;
    margin-right: 10px;
    border-radius: 20px;
  }
}

::v-deep .primary-table.el-table .el-table__header-wrapper th {
  background: #eaf3ff;
  height: 30px;
}
::v-deep .primary-table .el-table--medium .el-table__cell {
  padding: 5px -px;
}
::v-deep .type2 .el-input--medium .el-input__inner {
  height: 30px;
  line-height: 30px;
}
::v-deep .type2 .el-input--medium .el-input__icon {
  line-height: 30px;
}
::v-deep .type2 .w190.el-input.el-input--medium {
  width: 190px;
}
::v-deep .type2 .el-input.el-input--medium {
  width: 200px;
}
::v-deep .type2 .w90.el-input.el-input--medium {
  width: 100%;
}
::v-deep .type2 .w130.el-input.el-input--medium {
  width: 130px;
}
::v-deep .type2 .w150.el-input.el-input--medium {
  width: 150px;
}
::v-deep .type2 .w300.el-input.el-input--medium {
  width: 300px;
}
::v-deep .el-dialog__body {
  padding: 0px;
  height: 85vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 20px;
}
</style>
